<template>
  <div class="shuma">
    <!-- 头部 -->
    <search></search>
    <van-tabs v-model="active">
      <van-tab title="数码库">内容 1</van-tab>
      <!-- 数码 -->
      <van-tab title="数码">
        <div class="box">
          <!-- 我的关注 -->
          <div class="attention">
            <van-row>
              <van-col
                span="20"
                offset="1"
              >
                <b>我的关注</b>
              </van-col>
              <van-col span="3">更多
                <van-icon name="arrow" />
              </van-col>
            </van-row>
            <div class="atten_box">
              <div
                class="atten"
                v-for="att in attention"
                :key="att.id"
                @click="tomodule(att.Productid)"
              >
                <span>
                  <van-image
                    width="0.7rem"
                    height="0.7rem"
                    :src="'apis/kuan_api/ProductImg/'+att.ProductImg"
                    fit="contain"
                  />
                </span>
                <p style="margin:5px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;">
                  {{att.ProductName}}</p>
              </div>
            </div>
          </div>
          <!-- 数码分类 -->
          <div class="attention">
            <van-grid
              :border="false"
              :column-num="5"
            >
              <van-grid-item
                v-for="item in category"
                :key="item.id"
                :to="{name:'Scategory',query:{categoryid:item.categoryId,id:item.id}}"
              >
                <van-image
                  width="0.7rem"
                  height="0.7rem"
                  :src="'apis/kuan_api/categoryimg/'+item.categoryImg"
                  fit="contain"
                  style="padding-bottom:5px"
                />
                <span>{{item.categoryName}}</span>
              </van-grid-item>
              <van-grid-item>
                <img src="../img/qb.png">
                全部
              </van-grid-item>
            </van-grid>

          </div>
        </div>
      </van-tab>
      <!-- 手机 -->
      <van-tab title="手机">
        <div class="phone">
          <!-- 您的爱机 -->
          <van-cell-group inset>
            <van-cell
              title="您的爱机"
              is-link
            >
              <template #label>
                <div>
                  <van-row>
                    <van-col span="4">
                      <img
                        src="../img/xm12p.png"
                        class="phone_img"
                      >
                    </van-col>
                    <van-col span="12">
                      <p class="miaoshu">小米12 Pro</p>
                      <p class="miaoshu">32.8万热度 1.1万讨论</p>
                    </van-col>
                    <van-col
                      span="6"
                      :offset="2"
                    >
                      <p
                        style="text-align:center;"
                        class="miaoshu"
                      >
                        <b>
                          9.0</b>
                      </p>
                      <p>
                        <van-rate
                          v-model="rate"
                          :size="13"
                          color="#ffd21e"
                          void-icon="star"
                          void-color="#eee"
                          readonly
                        />
                      </p>
                    </van-col>
                  </van-row>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
          <van-cell-group inset>
            <van-cell
              title="5000元以上高分"
              is-link
            >

              <template #label>
                <!-- 手机2 -->
                <div>
                  <van-row>
                    <van-col span="4">
                      <img
                        src="../img/huawei.jpg"
                        class="phone_img"
                      >
                    </van-col>
                    <van-col span="12">
                      <p class="miaoshu">华为Mate40RS保时捷版</p>
                      <p class="miaoshu">57.3.5万热度 5.8万讨论</p>
                    </van-col>
                    <van-col
                      span="6"
                      :offset="2"
                    >
                      <p
                        style="text-align:center;"
                        class="miaoshu"
                      >
                        <b>
                          9.6</b>
                      </p>
                      <p>
                        <van-rate
                          v-model="iphone"
                          :size="13"
                          color="#ffd21e"
                          void-icon="star"
                          void-color="#eee"
                          readonly
                        />
                      </p>
                    </van-col>
                  </van-row>
                </div>
                <!-- 手机1 -->
                <div>
                  <van-row>
                    <van-col span="4">
                      <img
                        src="../img/iphone-13-pro-family-hero.png"
                        class="phone_img"
                      >
                    </van-col>
                    <van-col span="12">
                      <p class="miaoshu">IPhone 13ProMAX</p>
                      <p class="miaoshu">25.5万热度 1.5万讨论</p>
                    </van-col>
                    <van-col
                      span="6"
                      :offset="2"
                    >
                      <p
                        style="text-align:center;"
                        class="miaoshu"
                      >
                        <b>
                          9.5</b>
                      </p>
                      <p>
                        <van-rate
                          v-model="iphone"
                          :size="13"
                          color="#ffd21e"
                          void-icon="star"
                          void-color="#eee"
                          readonly
                        />
                      </p>
                    </van-col>
                  </van-row>
                </div>
                <!-- 手机1 -->
                <div>
                  <van-row>
                    <van-col span="4">
                      <img
                        src="../img/sanxingS22.jpg"
                        class="phone_img"
                      >
                    </van-col>
                    <van-col span="12">
                      <p class="miaoshu">Galaxy S22 Ultra</p>
                      <p class="miaoshu">116.5万热度 1.2万讨论</p>
                    </van-col>
                    <van-col
                      span="6"
                      :offset="2"
                    >
                      <p
                        style="text-align:center;"
                        class="miaoshu"
                      >
                        <b>
                          9.6</b>
                      </p>
                      <p>
                        <van-rate
                          v-model="iphone"
                          :size="13"
                          color="#ffd21e"
                          void-icon="star"
                          void-color="#eee"
                          readonly
                        />
                      </p>
                    </van-col>
                  </van-row>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </van-tab>
      <van-tab title="耳机">
        <router-link to="/scategory"></router-link>
      </van-tab>
      <van-tab title="排行榜">内容 4</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Search from "@/components/Search";
export default {
  components: { Search },
  name: "ShuMa",
  data() {
    return {
      active: 1,
      rate: 4.5,
      iphone: 5,
      category: null,
      imgurl: "../img/",
      attention: [],
    };
  },
  methods: {
    getcategory() {
      this.axios
        .post("apis/kuan_api/category.php", {
          code: 0,
        })
        .then((res) => {
          console.log(res.data.category);
          this.category = res.data.category;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 获取关注数码列表

    // 获取品牌关注列表
    getBrandAtt() {
      this.axios
        .post("apis/kuan_api/BrandAttention.php", {
          code: 0,
          userid: this.$store.state.user.user_id,
        })
        .then((res) => {
          this.attention = res.data.brandattention;
          console.log(this.attention);
        });
    },
    // 跳转模块
    tomodule(id) {
      this.$router.push({
        path: "/module",
        query: { productid: id },
      });
    },
  },
  created() {
    this.getcategory();
    if (this.$store.state.user.user_id != null) {
      this.getBrandAtt();
    }
  },
};
</script>

<style scoped>
.box {
  background-color: rgb(242, 241, 246);
}
.attention {
  width: 96%;
  margin: 0 auto;
  border-radius: 8px;
  margin-top: 15px;
  background-color: white;
}
img {
  width: 55%;
}
.phone {
  width: 98%;
  margin: 0 auto;
}
.phone_img {
  width: 100%;
}
.miaoshu {
  color: black;
  font-size: 14px;
  margin: 8px;
}
.atten_box {
  display: flex;
  flex-wrap: wrap;
  width: 94%;
  margin: 15px auto;
}
.atten {
  display: flex;
  height: 40px;
  width: 48%;
  /*设置内容不换行*/
  /*设置文字超出文本框的内容显示成...*/
}
</style>